<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const customerList = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const dialogVisible = ref(false)
const customerCars = ref([])

// 获取客户列表
const getCustomerList = async () => {
  try {
    const response = await axios.get('/carRepair/admin/accountManage/customer', {
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value
      }
    })
    if (response.data.code === 200) {
      customerList.value = response.data.data.records
      total.value = response.data.data.total
    }
  } catch (error) {
    console.error('获取客户列表失败:', error)
  }
}

// 获取客户车辆信息
const showCustomerCars = async (customer) => {
  try {
    const response = await axios.get(`/carRepair/admin/accountManage/customerCar/${customer.accountId}`)
    if (response.data.code === 200) {
      customerCars.value = response.data.data
      dialogVisible.value = true
    }
  } catch (error) {
    console.error('获取客户车辆信息失败:', error)
  }
}

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val
  getCustomerList()
}

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  getCustomerList()
}

onMounted(() => {
  getCustomerList()
})
</script>

<template>
  <div class="customer-manage">
    <el-card>
      <el-table :data="customerList" style="width: 100%">
        <el-table-column label="头像" width="100">
          <template #default="scope">
            <el-avatar :size="40" :src="scope.row.avatarUrl"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="accountName" label="账户名称" width="120"></el-table-column>
        <el-table-column prop="phone" label="联系电话" width="120"></el-table-column>
        <el-table-column prop="address" label="住址"></el-table-column>
        <el-table-column prop="alipayCount" label="支付宝账号" width="150"></el-table-column>
        <el-table-column prop="consumeAmount" label="消费金额" width="120">
          <template #default="scope">
            ¥{{ scope.row.consumeAmount }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button type="primary" size="small" @click="showCustomerCars(scope.row)">客户车辆</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 客户车辆信息对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="客户车辆信息"
      width="50%"
    >
      <el-table :data="customerCars" style="width: 100%">
        <el-table-column prop="plateNumber" label="车牌号" width="120"></el-table-column>
        <el-table-column prop="brand" label="品牌" width="120"></el-table-column>
        <el-table-column prop="model" label="车型" width="150"></el-table-column>
        <el-table-column prop="mileage" label="当前里程数">
          <template #default="scope">
            {{ scope.row.mileage }} 公里
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style scoped>
.customer-manage {
  padding: 0px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>